<template>
    <div class='detail-content overflow-hidden flex flex-col' :class="{'no-head': isNoHead}">
        <div class="w-full flex items-center mb-10px">
            <n-flex align="center" class="cursor-pointer" @click="goBack">
                <img class="w-20px h-20px" :src="iconArrowL" alt="">
                <!-- <span class="text-base text-[#fff]">智能网办</span> -->
            </n-flex>
            <n-flex class="mx-auto" align="center" :size="16" v-if="tabName == 'theme'">
                <span class="text-[#fff] text-base cursor-pointer" :class="{'fw-tab-active': serverType == 2}" @click="serverType = 2">法人服务</span>
                <n-divider vertical />
                <span class="text-[#fff] text-base cursor-pointer" :class="{'fw-tab-active': serverType == 1}" @click="serverType = 1">个人服务</span>
            </n-flex>
        </div>
        <div class="flex-1 flex flex-col overflow-y-auto pb-28px pr-15px mt-14px">
            <ul class="grid grid-cols-6 gap-18px" v-if="sortData.length">
                <li class="flex-center tag-li gap-20px" :class="{'active': sortIndex == i}" v-for="(item, i) in sortData" :key="i" @click="checkSortTag(i)">
                    <img class="w-26px h-26px" v-if="item.icon" :src="item.icon" alt="">
                    <span class="text-[#4C5E7B] text-base">{{ item.name }}</span>
                </li>
            </ul>
            <div class="x-center top-[52%]" v-if="loading">
                <Loading />
            </div>
            <template v-else>
                <ul class="mt-25px flex flex-col flex-1 gap-12px relative" v-if="sortData.length">
                    <template v-if="sortData[sortIndex].data.length">
                        <li class="item-li flex items-center cursor-pointer" v-for="item in sortData[sortIndex].data" :key="item.uuid" @click="openUrlDetail(item.file_or_url)">
                            <img class="w-24px h-24px" :src="iconArrowRsr" alt="">
                            <span class="text-[#fff] text-base font-bold ml-2">{{ item.name }}</span>
                        </li>
                    </template>
                    <li class="flex items-center flex-col xy-center" v-else>
                        <img class="w-121px h-124px" src="/no-data.png" alt="">
                        <span class="text-[#cbd5e1] text-base">暂无数据</span>
                    </li>
                </ul>
                <div class="flex items-center flex-col x-center top-[50%]" v-else>
                    <img class="w-121px h-124px" src="/no-data.png" alt="">
                    <span class="text-[#cbd5e1] text-base">暂无数据</span>
                </div>
            </template>
            
        </div>
    </div>
</template>

<script lang="ts" setup>
    import iconArrowL from "@/assets/image/icon/icon-arrow-l.png"
    import iconArrowRsr from "@/assets/image/icon/icon-arrow-rsr.png"
    import { getMatterSortApi } from "@/api/home"

    const props = defineProps<{
        tabName: 'theme' | 'dept',
        seType: 1 | 2,
        detailId?: string
    }>()
    const emit = defineEmits(['update:show'])

    const route = useRoute()
    const serverType = ref<1 | 2>(2)

    const sortData = ref<any>([])
    const sortIndex = ref(0)

    const loading = ref(true)

    const isNoHead = ref(false)

    onMounted(() => {
        serverType.value = props.seType
        renderMatterSortData()

        if(route.fullPath !== '/home') {
            isNoHead.value = true
        }
    })

    async function renderMatterSortData() {
        const { items } = await getMatterSortApi({by: props.tabName, category: unref(serverType)})
        if(props.detailId) {
            sortIndex.value = items.findIndex(ele => ele.uuid == props.detailId)
            console.log(unref(sortIndex));
            if(sortIndex.value == -1) {
                sortIndex.value = 0
            }
        }
        sortData.value = items
        
        loading.value = false
    }

    watch(() => serverType.value, (newVal) => {
        renderMatterSortData()
    })

    const checkSortTag = (index:number) => {
        loading.value = true
        sortIndex.value = index
        setTimeout(() => {
            loading.value = false
        }, 400)
    }

    const goBack = () => {
        emit('update:show', false)
    }

    const openUrlDetail = (url:string) => {
        window.open(url)
    }
    
</script>

<style lang="scss" scoped>
    .detail-content {
        width: 100%;
        height: calc(100% - 120px);
        margin-top: 19px;
        padding: 30px 15px 2px 30px;
        background: radial-gradient( 182% 209% at 50% 13%, rgba(0, 186, 255, .5) 0%, rgba(22, 119, 255, .5) 45%, rgba(0,85,254,0.38) 100%);
        border: 2px solid;
        border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.43), rgba(255, 255, 255, 0.08)) 1 1;

        &.no-head {
            height: calc(100% - 30px);
        }

        .fw-tab-active {
            position: relative;

            &::after {
                content: '';
                position: absolute;
                height: 3px;
                width: 106%;
                background-color: #fff;
                left: -2%;
                bottom: -6px;
            }
        }

        .tag-li {
            height: 47px;
            background: rgba(170,203,255,0.5);
            border-radius: 4px;
            cursor: pointer;
            transition: all .3s;

            &.active {
                color: #19202B !important;
                background: #C0D9FF;
            }

            &:hover {
                background: #C0D9FF;
            }
        }

        .item-li {
            height: 61px;
            background: rgba(77,136,239,0.8);
            border-radius: 6px;
            padding: 0 20px;
            transition: all .3s;

            &:hover {
                background: rgb(91, 145, 239);
            }
        }
    }
</style>